/* juris for business. Layered on styles.css and chambers.css, which carry the
   band system, the hero, the showcase, the FAQ and the enquiry form. This file
   holds only what the business page has and chambers does not: the two-plan
   comparison, the example questions and the form's privacy line. Tokens only. */

/* ------------------------------------------------------------ plans --- */
.bz-plans{display:grid; gap:18px; grid-template-columns:1fr; margin-top:8px}
@media(min-width:820px){ .bz-plans{grid-template-columns:1fr 1fr} }

.bz-plan{
  display:flex; flex-direction:column; gap:6px;
  background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-lg);
  padding:28px 26px 26px;
}
.bz-plan-more{
  border-color:color-mix(in srgb, var(--accent) 45%, var(--hair));
  box-shadow:var(--shadow-2);
}
.bz-plan-name{
  margin:0; font-size:var(--fs-xs); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent-ink);
}
.bz-plan-price{margin:2px 0 0; font-family:var(--font-display); font-size:var(--fs-xl); line-height:1.15; color:var(--ink)}
.bz-plan-for{margin:0 0 10px; color:var(--muted); font-size:var(--fs-sm)}
.bz-plan .ch-list{margin:6px 0 22px; flex:1}
.bz-plan .pillcta{align-self:flex-start}

/* --------------------------------------------------------- examples --- */
.bz-examples{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:700px){ .bz-examples{grid-template-columns:1fr 1fr} }
@media(min-width:1040px){ .bz-examples{grid-template-columns:repeat(3,1fr)} }

.bz-ex{
  display:flex; flex-direction:column; gap:10px; min-height:var(--tap);
  padding:20px 20px 22px; border-radius:var(--r-lg);
  background:var(--panel); border:1px solid var(--hair);
  color:var(--ink); text-decoration:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.bz-ex:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.bz-ex-tag{
  align-self:flex-start; padding:3px 10px; border-radius:var(--r-pill);
  background:var(--accent-soft);
  color:var(--accent-ink); font-size:var(--fs-xs); font-weight:600;
}
.bz-ex-q{font-size:var(--fs-md); line-height:1.45}
.bz-ex-q:after{content:" \2192"; color:var(--accent-ink)}
@media (hover:hover) and (pointer:fine){
  .bz-ex:hover{border-color:color-mix(in srgb, var(--accent) 45%, var(--hair)); box-shadow:var(--shadow-2)}
}

/* ------------------------------------------------------------- form --- */
.bz-privacy{margin:4px 0 0; color:var(--muted); font-size:var(--fs-sm); line-height:1.5}

/* Phone with a country code. One bordered box, like the other fields, holding
   a flag chip and the number. The native select is stretched invisibly over
   the chip, so the chip is what people see and the select is what they use. */
.bz-phone{
  display:flex; align-items:stretch;
  background:var(--canvas); border:1px solid var(--hair); border-radius:var(--r-md);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.bz-phone:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.bz-cc{position:relative; display:flex; flex:none; border-right:1px solid var(--hair)}
.bz-cc-face{
  display:flex; align-items:center; gap:6px; padding:0 10px 0 12px; border-radius:var(--r-md) 0 0 var(--r-md);
  font-size:var(--fs-md); color:var(--ink); font-variant-numeric:tabular-nums;
  transition:opacity .18s ease;
}
.bz-cc-flag{font-size:1.15em; line-height:1}
.bz-cc-chev{color:var(--muted)}
.bz-cc select{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
  font-size:var(--fs-md); /* stops iOS zooming on focus */
}
.bz-phone .bz-cc:has(select:focus-visible) .bz-cc-face{color:var(--accent-ink)}
/* A number typed with its own "+" is sent as typed; the chip steps back. */
.bz-phone.is-intl .bz-cc-face{opacity:.4}
.bz-phone input{
  flex:1; min-width:0; border:0; border-radius:0 var(--r-md) var(--r-md) 0;
  background:transparent; box-shadow:none;
}
.bz-phone input:focus-visible{border:0; box-shadow:none}
@media (hover:hover) and (pointer:fine){
  .bz-cc:hover .bz-cc-face{background:color-mix(in srgb, var(--ink) 4%, transparent)}
}

/* ------------------------------------------------------------- hero --- */
/* chambers holds its headline to 15ch; this one is a sentence longer and would
   stack four short lines beside an empty right half. */
.bz .ch-hero h1{max-width:21ch}

/* -------------------------------------------------------- use cases --- */
/* Six situations, each a drawn juris window that plays its answer. Authored
   complete: with JavaScript off (.uc without .is-live) every scene stacks in its
   final state. business-uc.js adds .is-live (tabs, one scene at a time) and,
   unless reduced motion is on, .is-anim, which is the only place anything is
   hidden. So a nulled animation can never leave a scene blank.
   Motion borrows two ideas from motion.dev, rebuilt without a library: a spring
   (as a linear() curve, with a cubic-bezier fallback for engines without it)
   for things that arrive, and a short ease-out for things that leave, with a
   0.04s-per-item stagger on lists. */
.uc{
  --uc-spring:cubic-bezier(.2,.9,.25,1.15);
  --uc-out:cubic-bezier(.4,0,1,1);
  --uc-soft:cubic-bezier(.16,1,.3,1);
  margin-top:8px;
}
@supports (transition-timing-function:linear(0,1)){
  .uc{ --uc-spring:linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%,
       .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.6%, 1) }
}

/* ---- rail ---- */
.uc-rail{display:none}
.uc.is-live .uc-rail{display:flex; flex-direction:column; gap:12px}
.uc-tabs{position:relative; display:flex; flex-direction:column; gap:4px}
.uc-ind{
  position:absolute; left:0; top:0; width:100%; height:0; z-index:0;
  background:var(--panel); border-radius:var(--r-lg); box-shadow:var(--shadow-2);
  transform:translateY(var(--y,0)); height:var(--h,0);
  transition:transform .55s var(--uc-spring), height .55s var(--uc-spring), width .55s var(--uc-spring);
}
.uc-tab{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  min-height:var(--tap); padding:14px 18px 16px; border:0; background:none; border-radius:var(--r-lg);
  font:inherit; color:var(--muted); text-align:left; cursor:pointer; overflow:hidden;
  transition:color .25s ease;
}
.uc-tab:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.uc-tab-who{font-size:var(--fs-xs); font-weight:600; letter-spacing:.04em; color:var(--accent-ink); opacity:.75}
.uc-tab-t{font-family:var(--font-display); font-size:var(--fs-lg); line-height:1.25; color:inherit}
.uc-tab[aria-selected="true"]{color:var(--ink)}
.uc-tab[aria-selected="true"] .uc-tab-who{opacity:1}
@media (hover:hover) and (pointer:fine){ .uc-tab:hover{color:var(--ink)} }
/* Progress through the playing scene. JS sets --p from 0 to 1. */
.uc-bar{position:absolute; left:18px; right:18px; bottom:8px; height:2px; border-radius:2px; background:transparent; overflow:hidden}
.uc-tab[aria-selected="true"] .uc-bar{background:color-mix(in srgb, var(--accent) 16%, transparent)}
.uc-bar i{display:block; height:100%; width:100%; background:var(--accent); transform-origin:left; transform:scaleX(0)}
.uc-tab[aria-selected="true"] .uc-bar i{transform:scaleX(var(--p,0))}

.uc-pause{
  align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  min-height:var(--tap); padding:0 16px; border-radius:var(--r-pill);
  border:1px solid var(--hair); background:transparent; color:var(--muted);
  font:inherit; font-size:var(--fs-sm); font-weight:600; cursor:pointer;
}
.uc-pause:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.uc-pause-ic{width:10px; height:12px; border-left:3px solid currentColor; border-right:3px solid currentColor}
.uc-pause[aria-pressed="true"] .uc-pause-ic{width:0; height:0; border:0; border-left:10px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent}
.uc:not(.is-anim) .uc-pause{display:none}
@media (hover:hover) and (pointer:fine){ .uc-pause:hover{color:var(--ink); border-color:color-mix(in srgb, var(--ink) 25%, var(--hair))} }

/* ---- stage ---- */
.uc-stage{display:grid; gap:40px}
.uc.is-live .uc-stage{gap:0}
/* Live: every scene shares one grid cell, so the stage is always as tall as the
   tallest scene and switching never moves the page. */
.uc.is-live .uc-scene{grid-area:1/1}
.uc.is-live .uc-scene:not(.is-on){visibility:hidden; opacity:0; pointer-events:none}
.uc.is-live .uc-head{display:none}

.uc-scene{display:flex; flex-direction:column; gap:14px; min-width:0}
.uc-head{display:flex; flex-direction:column; gap:2px}
.uc-who{font-size:var(--fs-xs); font-weight:600; letter-spacing:.04em; color:var(--accent-ink)}
.uc-t{margin:0; font-family:var(--font-display); font-weight:400; font-size:var(--fs-xl); line-height:1.2; color:var(--ink)}

/* the drawn window */
.uc-app{
  position:relative; overflow:hidden; background:var(--canvas);
  border:1px solid var(--hair); border-radius:var(--r-xl); box-shadow:var(--shadow-2);
}
.uc-app:before{content:""; display:block; height:3px;
  background:linear-gradient(90deg, var(--flag-red) 0 25%, var(--flag-blue) 25% 50%, var(--flag-yellow) 50% 75%, var(--flag-green) 75%)}
.uc-bar-top{display:flex; align-items:center; gap:8px; padding:12px 18px 0}
.uc-brand{font-family:var(--font-display); font-size:var(--fs-md); color:var(--ink); margin-right:auto}
.uc-brand .dot{color:var(--accent)}
.uc-pill{font-size:var(--fs-xs); font-weight:600; padding:4px 11px; border-radius:var(--r-pill); background:var(--primary-fill); color:var(--primary-fg)}
.uc-pill-lang{background:var(--panel); color:var(--ink); border:1px solid var(--hair)}
.uc-body{display:flex; flex-direction:column; gap:14px; padding:18px 18px 20px}
@media(min-width:700px){ .uc-body{padding:22px 28px 26px} }

.uc-q{
  align-self:flex-end; max-width:85%; margin:0; padding:10px 14px;
  background:var(--accent-soft); color:var(--ink); border-radius:var(--r-lg) var(--r-lg) 4px var(--r-lg);
  font-size:var(--fs-sm); line-height:1.5;
}
.uc-think{display:none; align-items:center; gap:5px; margin:0; font-size:var(--fs-xs); color:var(--muted)}
.uc-think i{width:5px; height:5px; border-radius:50%; background:var(--accent); animation:uc-dot 1s infinite ease-in-out}
.uc-think i:nth-child(2){animation-delay:.15s} .uc-think i:nth-child(3){animation-delay:.3s}
.uc-think span{margin-left:4px}
@keyframes uc-dot{0%,100%{opacity:.25; transform:translateY(0)} 50%{opacity:1; transform:translateY(-2px)}}

.uc-ans{background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--shadow-1)}
.uc-lead{margin:0; font-size:var(--fs-md); line-height:1.55; color:var(--ink)}
.uc-pts{margin:10px 0 0; padding:0; list-style:none; counter-reset:uc}
.uc-pts li{counter-increment:uc; position:relative; padding:9px 0 0 26px; border-top:1px solid var(--hair); margin-top:9px;
  font-size:var(--fs-sm); line-height:1.55; color:var(--ink)}
.uc-pts li:before{content:counter(uc) "."; position:absolute; left:2px; top:9px; color:var(--accent-ink); font-weight:600}
.uc-ans .cite{padding:1px 8px; border-radius:var(--r-pill); white-space:nowrap; vertical-align:1px}

/* beats: what juris does after the answer */
.uc-beat{background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--shadow-2)}
.uc-beat-k{margin:0 0 8px; font-size:var(--fs-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink)}
.uc-beat-src{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0 0; font-size:var(--fs-xs); color:var(--muted)}
.uc-src-code{margin:0; font-weight:600; font-size:var(--fs-md); color:var(--ink); font-variant-numeric:tabular-nums}
.uc-src-title{margin:2px 0 10px; font-family:var(--font-display); font-size:var(--fs-md); color:var(--ink); letter-spacing:.02em}
.uc-src-meta{display:grid; grid-template-columns:auto 1fr; gap:4px 16px; margin:0 0 12px; font-size:var(--fs-sm)}
.uc-src-meta dt{color:var(--muted); font-size:var(--fs-xs); font-weight:600; letter-spacing:.04em; text-transform:uppercase; align-self:center}
.uc-src-meta dd{margin:0; color:var(--ink)}
.uc-src-btn{display:inline-flex; align-items:center; padding:7px 14px; border-radius:var(--r-pill); background:var(--primary-fill); color:var(--primary-fg); font-size:var(--fs-xs); font-weight:600}

.uc-check ul{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.uc-check li{position:relative; padding-left:30px; font-size:var(--fs-sm); line-height:1.45; color:var(--ink)}
.uc-check li:before{content:"\2713"; position:absolute; left:0; top:-1px; width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center; font-size:11px; font-weight:700;
  background:color-mix(in srgb, var(--verified) 14%, transparent); color:var(--verified-ink)}

.uc-cal{display:grid; grid-template-columns:repeat(10,1fr); gap:4px}
.uc-cal span{display:grid; place-items:center; aspect-ratio:1; border-radius:var(--r-sm); font-size:var(--fs-xs); font-weight:600;
  font-variant-numeric:tabular-nums; background:color-mix(in srgb, var(--accent) 16%, var(--panel)); color:var(--accent-ink)}
.uc-cal span.last{background:var(--primary-fill); color:var(--primary-fg)}
.uc-days-out{margin:12px 0 0; font-size:var(--fs-sm); line-height:1.5; color:var(--ink)}
.uc-unrev{padding:2px 9px; border-radius:var(--r-pill); color:var(--unverified-ink); background:color-mix(in srgb, var(--unverified) 10%, transparent); font-weight:600}

.uc-quote blockquote{margin:8px 0 0; padding:0 0 0 14px; border-left:2px solid var(--accent); font-size:var(--fs-sm); line-height:1.65; color:var(--ink)}
.uc-quote mark{color:inherit; padding:1px 0; border-radius:3px;
  background:linear-gradient(color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent) 26%, transparent)) no-repeat 0 0 / var(--m,100%) 100%;
  -webkit-box-decoration-break:clone; box-decoration-break:clone}

.uc-lang-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0}
.uc-lang-tag{padding:5px 12px; border-radius:var(--r-pill); background:var(--panel-2); color:var(--ink); font-size:var(--fs-xs); font-weight:600}
.uc-lang-tag:first-child, .uc-lang-tag:last-child{background:var(--accent-soft); color:var(--accent-ink)}
.uc-lang-arrow{width:18px; height:1px; background:var(--muted); position:relative}
.uc-lang-arrow:after{content:""; position:absolute; right:0; top:-3px; border:3.5px solid transparent; border-left:5px solid var(--muted); border-right:0}
.uc-lang-note{margin:10px 0 0; font-size:var(--fs-sm); line-height:1.5; color:var(--muted)}

.uc-route ol{margin:0; padding:0; list-style:none; display:grid; gap:0}
.uc-route li{position:relative; display:flex; flex-direction:column; padding:0 0 14px 30px}
.uc-route li:last-child{padding-bottom:0}
.uc-route li:before{content:""; position:absolute; left:4px; top:4px; width:12px; height:12px; border-radius:50%;
  background:var(--panel); border:2px solid var(--accent)}
.uc-route li:not(:last-child):after{content:""; position:absolute; left:10px; top:20px; bottom:0; width:2px;
  background:color-mix(in srgb, var(--accent) 35%, transparent); transform-origin:top}
.uc-route strong{font-size:var(--fs-sm); color:var(--ink)}
.uc-route li span{font-size:var(--fs-xs); color:var(--muted)}

.uc-ask{align-self:flex-start; display:inline-flex; align-items:center; gap:6px; min-height:var(--tap);
  font-size:var(--fs-sm); font-weight:600; color:var(--accent-ink); text-decoration:none}
.uc-ask:after{content:"\2192"; transition:transform .25s var(--uc-soft)}
.uc-ask:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}
@media (hover:hover) and (pointer:fine){ .uc-ask:hover:after{transform:translateX(3px)} }
.uc-note{margin-top:20px}

/* ---- layout ---- */
@media(min-width:960px){
  .uc.is-live{display:grid; grid-template-columns:minmax(240px,300px) 1fr; gap:40px; align-items:start}
  .uc.is-live .uc-rail{position:sticky; top:96px}
}
/* Phones and tablets: the rail becomes a row of chips that scrolls sideways. */
@media(max-width:959.98px){
  .uc.is-live .uc-rail{flex-direction:row; align-items:center; gap:8px; margin:0 -16px 16px; padding:0 16px}
  .uc-tabs{flex-direction:row; gap:4px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity; flex:1; padding:4px 0 8px}
  .uc-tabs::-webkit-scrollbar{display:none}
  /* the chips run off both edges; fade them rather than slice a word in half */
  .uc-tabs{-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent); mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent)}
  .uc-ind{width:var(--w,0); transform:translateX(var(--x,0)); top:4px}
  .uc-tab{flex:none; scroll-snap-align:start; padding:10px 14px 14px; max-width:230px}
  .uc-tab-t{font-size:var(--fs-md); white-space:nowrap}
  .uc-bar{left:14px; right:14px; bottom:6px}
  .uc-pause{align-self:auto; padding:0; width:var(--tap); justify-content:center; flex:none}
  .uc-pause .uc-when-on, .uc-pause .uc-when-off{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
}

/* ---- motion ----
   .is-anim only. data-step on the playing scene walks 0 (typing) -> 1 (thinking)
   -> 2 (answer) -> 3 (the beat) -> 4 (done). A scene that is not playing shows
   its final state, so a tab clicked while paused is never empty. */
.uc.is-anim .uc-scene.is-on{animation:uc-in .6s var(--uc-soft) both}
.uc.is-anim .uc-scene.is-leaving{visibility:visible; animation:uc-out .22s var(--uc-out) both}
@keyframes uc-in{from{opacity:0; transform:translateY(14px) scale(.985); filter:blur(4px)} to{opacity:1; transform:none; filter:none}}
@keyframes uc-out{from{opacity:1; transform:none; filter:none} to{opacity:0; transform:translateY(-8px) scale(.99); filter:blur(3px)}}

.uc.is-anim .uc-scene[data-step] .uc-ans,
.uc.is-anim .uc-scene[data-step] .uc-beat{
  transition:opacity .45s var(--uc-soft), transform .7s var(--uc-spring), filter .45s var(--uc-soft)}
.uc.is-anim .uc-scene[data-step="0"] .uc-ans, .uc.is-anim .uc-scene[data-step="1"] .uc-ans{opacity:0; transform:translateY(16px); filter:blur(3px)}
.uc.is-anim .uc-scene[data-step="0"] .uc-beat, .uc.is-anim .uc-scene[data-step="1"] .uc-beat,
.uc.is-anim .uc-scene[data-step="2"] .uc-beat{opacity:0; transform:translateY(22px) scale(.97); filter:blur(3px)}
.uc.is-anim .uc-scene[data-step="1"] .uc-think{display:flex}
.uc.is-anim .uc-scene[data-step="0"] .uc-q{animation:uc-pop .5s var(--uc-spring) both}
@keyframes uc-pop{from{opacity:0; transform:translateY(8px) scale(.96)} to{opacity:1; transform:none}}
.uc-q .uc-caret{display:inline-block; width:2px; height:1em; margin-left:2px; vertical-align:-2px; background:var(--accent); animation:uc-blink .9s steps(1) infinite}
@keyframes uc-blink{50%{opacity:0}}

/* answer lines and chips, staggered (--k is set by JS per item) */
.uc.is-anim .uc-scene[data-step="2"] .uc-lead,
.uc.is-anim .uc-scene[data-step="2"] .uc-pts li{animation:uc-rise .55s var(--uc-soft) both; animation-delay:calc(var(--k,0) * .12s)}
.uc.is-anim .uc-scene[data-step="2"] .cite{animation:uc-chip .6s var(--uc-spring) both; animation-delay:calc(var(--k,0) * .12s + .35s)}
@keyframes uc-rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@keyframes uc-chip{from{opacity:0; transform:scale(.6)} to{opacity:1; transform:none}}

/* beat internals, played once the beat lands */
.uc.is-anim .uc-scene[data-step="3"] .uc-check li{animation:uc-rise .5s var(--uc-soft) both; animation-delay:calc(.25s + var(--k,0) * .18s)}
.uc.is-anim .uc-scene[data-step="3"] .uc-check li:before{animation:uc-chip .5s var(--uc-spring) both; animation-delay:calc(.35s + var(--k,0) * .18s)}
.uc.is-anim .uc-scene[data-step="3"] .uc-cal span{animation:uc-day .45s var(--uc-spring) both; animation-delay:calc(.25s + var(--i) * .11s)}
.uc.is-anim .uc-scene[data-step="3"] .uc-cal span.last{animation:uc-day .45s var(--uc-spring) both, uc-ring 1.4s .2s ease-out both; animation-delay:calc(.25s + var(--i) * .11s), 1.45s}
@keyframes uc-day{from{opacity:0; transform:scale(.5)} to{opacity:1; transform:none}}
@keyframes uc-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent)} 100%{box-shadow:0 0 0 12px transparent}}
.uc.is-anim .uc-scene[data-step="3"] .uc-days-out{animation:uc-rise .5s 1.35s var(--uc-soft) both}
.uc.is-anim .uc-scene[data-step="3"] .uc-quote mark{animation:uc-mark 1.1s .45s var(--uc-soft) both}
@keyframes uc-mark{from{--m:0%; background-size:0% 100%} to{background-size:100% 100%}}
.uc.is-anim .uc-scene[data-step="3"] .uc-lang-row > *{animation:uc-rise .45s var(--uc-soft) both; animation-delay:calc(.2s + var(--k,0) * .16s)}
.uc.is-anim .uc-scene[data-step="3"] .uc-route li{animation:uc-rise .5s var(--uc-soft) both; animation-delay:calc(.25s + var(--i) * .3s)}
.uc.is-anim .uc-scene[data-step="3"] .uc-route li:after{animation:uc-line .4s ease-out both; animation-delay:calc(.45s + var(--i) * .3s)}
@keyframes uc-line{from{transform:scaleY(0)} to{transform:none}}
.uc.is-anim .uc-scene[data-step="3"] .uc-src-meta, .uc.is-anim .uc-scene[data-step="3"] .uc-src-btn{animation:uc-rise .5s .3s var(--uc-soft) both}
/* while typing, the real question is kept for screen readers and the drawn copy shows */
.uc-q.is-typing [data-uc-type]{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.uc-typed{white-space:pre-wrap}
/* the thinking row sits where the answer will land, so it never changes the height */
.uc-slot{position:relative}
.uc-slot .uc-think{position:absolute; left:2px; top:4px}
/* one window size for every scene, like a device: the stage is as tall as the
   longest scene, and each window fills it */
.uc.is-live .uc-app{flex:1}
.uc-app{display:flex; flex-direction:column}
.uc-body{flex:1}
.uc-compose{display:flex; align-items:center; gap:8px; margin:auto 18px 16px; padding:8px 8px 8px 16px;
  background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--shadow-1);
  font-size:var(--fs-sm); color:var(--faint)}
@media(min-width:700px){ .uc-compose{margin:auto 28px 20px} }
.uc-compose span:first-child{flex:1}
.uc-send{padding:6px 14px; border-radius:var(--r-md); background:var(--primary-fill); color:var(--primary-fg); font-size:var(--fs-xs); font-weight:600}
.uc-when-off{display:none}
.uc-pause[aria-pressed="true"] .uc-when-on{display:none}
.uc-pause[aria-pressed="true"] .uc-when-off{display:inline}

/* ------------------------------------------------------ phone nav --- */
/* At phone width the wordmark, "Try it free" and the language pill do not fit
   one row, and the pill dropped under the wordmark. The hero carries the same
   "try it free" link one scroll below, so the nav keeps the wordmark and the
   languages. */
@media(max-width:559.98px){
  .bz .navshell .nav-right .navlink{display:none}
  .bz .navshell .nav, .bz .navshell .nav-right{flex-wrap:nowrap}
}

/* ------------------------------------------------ use cases, phone --- */
@media(max-width:959.98px){
  .uc-tabs{padding:4px 0 16px}
  .uc-ind{box-shadow:var(--shadow-1)}
}
@media(max-width:699.98px){
  .uc-body{gap:12px; padding:14px 14px 16px}
  .uc-bar-top{padding:10px 14px 0}
  .uc-lead{font-size:var(--fs-sm)}
  .uc-ans, .uc-beat{padding:14px}
  .uc-compose{margin:auto 14px 14px}
  .uc-q{max-width:92%}
}
/* hooks the scene script and the tests address by name */
.uc-band{scroll-margin-top:80px}
.uc-src .uc-src-btn{margin-top:2px}
.uc-days .uc-beat-src{margin-top:10px}
.uc-lang .uc-beat-k{margin-bottom:10px}